<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../vender/animate@3.5.0.min.css">
    <style>
        .color-preview {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

<div id="app">
    <input type="number" step="100" v-model.number="firstNumber"> +
    <input type="number" step="100" v-model.number="secondNumber"> =
    {{result}}
    <p>
        <animated-integer :value="firstNumber"></animated-integer> +
        <animated-integer :value="secondNumber"></animated-integer> =
        <animated-integer :value="result"></animated-integer>
    </p>
</div>


</body>
<script src="../../vender/vue@2.4.2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<script>
    Vue.component('animated-integer',{
        template:'<span>{{tweeningValue}}</span>',
        props:{
            value:{
                type:Number,
                required:true
            }
        },
        data: function () {
            return {
                tweeningValue:0
            }
        },
        watch:{
            value: function (newVal, oldVal) {
                this.tween(oldVal,newVal);
            }
        },
        mounted: function () {
            this.tween(0,this.value);
        },
        methods:{
            tween: function (start, end) {
                var vm=this;
                function animate(){
                    if(TWEEN.update()){
                        requestAnimationFrame(animate);
                    }
                }
                new TWEEN.Tween({tweeningValue:start})
                        .to({tweeningValue:end},500)
                        .onUpdate(function () {
                            //console.log('this:',this);
                            vm.tweeningValue=this.tweeningValue.toFixed(0);
                        })
                        .start();
                animate();
            }
        }
    });
    var app=new Vue({
        el:'#app',
        data:{
            firstNumber:0,
            secondNumber:0
        },
        computed:{
            result: function () {
                return this.firstNumber+this.secondNumber;
            }
        }
    });

</script>
</html>